<template>
  <div class="user-detail-con">
    <div class="user-info-text-center">
      <a-avatar shape="circle" :size="64" :src="avatar" />
      <p class="qc-m-8">
        <strong style="font-size: 20px;">久伴轻尘</strong>
      </p>
      <p>闲来三两事,与君共此时</p>
    </div>
    <a-row>
      <a-col :span="24">
        <div class="qc-description-term">
          <icon-font class="qc-mr-8" type="icon-user" />
        </div>
        <div class="qc-description-detail">
          <p>后端工程师</p>
        </div>
      </a-col>

      <a-col :span="24">
        <div class="qc-description-term">
          <icon-font class="qc-mr-8" type="icon-user" />
        </div>
        <div class="qc-description-detail">
          <p>中台-数据平台团队-前端创新团队-前端架构和平台工具团队</p>
        </div>
      </a-col>

      <a-col :span="24">
        <div class="qc-description-term">
          <icon-font class="qc-mr-8" type="icon-user" />
        </div>
        <div class="qc-description-detail">
          <p>北京市</p>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" justify="space-around" align="middle">
      <a-col :span="6" class="qc-tooltip">
        <a-icon type="weibo" />
      </a-col>
      <a-col :span="6" class="qc-tooltip">
        <a-icon type="zhihu" />
      </a-col>
      <a-col :span="6" class="qc-tooltip">
        <a-icon type="wechat" />
      </a-col>
      <a-col :span="6" class="qc-tooltip">
        <a-icon type="dingding" />
      </a-col>
    </a-row>
    <a-divider dashed />
    <div class="qc-description-list">
      <div class="qc-description-title">擅长</div>
      <div class="qc-description-content">
        <a-tag>JAVA</a-tag>
        <a-tag>JFINAL</a-tag>
        <a-tag>JS</a-tag>
        <a-tag>VUE</a-tag>
        <a-tag>ant design vue</a-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatar: require("../../../assets/qc.jpg")
    };
  }
};
</script>

<style scoped>
.qc-m-8 {
  margin: 8px;
}
.qc-mr-8 {
  margin-right: 8px;
}
.qc-description-term,
.qc-description-detail {
  display: table-cell;
  padding-bottom: 16px;
  line-height: 20px;
}
.qc-tooltip {
  text-align: center;
}
.qc-tooltip > .anticon {
  font-size: 30px;
}

.qc-description-content {
  margin-top: 8px;
}
.user-info-text-center {
  text-align: center;
}
</style>